contextMenu#

The contextMenu property allows a view to present a contextual menu when the user performs a long-press or right-click gesture. This behavior is consistent with the system-provided context menus in iOS and iPadOS. Developers can define menu items and optionally include a preview view that appears alongside the menu.

Definition#

1contextMenu?: {
2  menuItems: VirtualNode
3  preview?: VirtualNode
4}

Properties#

• menuItems: A VirtualNode that defines the contents of the context menu. This typically consists of one or more Button components grouped within a Group element.

• preview (optional): A VirtualNode representing a preview view. This preview is displayed adjacent to the context menu, giving users a visual hint of the item or action being contextualized.

Behavior#

When applied to a view, the contextMenu modifier activates when the user performs a long press (on touch devices) or right-click (on pointer-based devices). The system then displays the defined menuItems, and if provided, renders the preview view.

Example#

1function View() {
2  return <Text
3    contextMenu={{
4      menuItems: <Group>
5        <Button
6          title="Add"
7          action={() => {
8            // Handle add action
9          }}
10        />
11        <Button
12          title="Delete"
13          role="destructive"
14          action={() => {
15            // Handle delete action
16          }}
17        />
18      </Group>
19    }}
20  >
21    Long Press to Open Context Menu
22  </Text>
23}

In this example, the Text view is enhanced with a context menu that appears on long press. The menu presents two actions: "Add" and "Delete", with the "Delete" button styled as destructive.

Notes#

• The context menu is automatically styled by the system and adapts to platform conventions.
• If the preview property is not provided, only the menu items will be displayed.
• The menuItems should be structured within a Group to ensure proper layout and interaction handling.